import React from 'react';
import {Image, ScrollView, StyleSheet, TouchableOpacity, View,} from 'react-native';
import * as Color from "../constant/Color";

const imageJS   = require('../../../img/iu.jpg');

/** Image
 * -------------resizeMode-------------
 * cover:   在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
 * contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
 * stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
 * repeat:  重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
 * center:  居中不拉伸。
 * */
export default class PageImage extends React.Component {

    render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <View
                        style={{height:200, flexDirection:'row', alignItems:'center',justifyContent:'space-around'}}>
                        <Image
                            style={styles.pic1}
                            source={imageJS}
                            resizeMode={Image.resizeMode.cover}/>

                        <Image
                            style={[styles.pic1, {
                                borderColor:Color.orange,
                                borderWidth:1,
                                borderRadius:5}]}
                            source={imageJS}
                            resizeMode={Image.resizeMode.cover}/>

                        <TouchableOpacity>
                            <Image
                                style={[styles.pic1, {
                                    borderColor:Color.orange,
                                    borderWidth:1,
                                    borderRadius:5}]}
                                source={imageJS}
                                resizeMode={Image.resizeMode.cover}/>
                        </TouchableOpacity>

                    </View>
                </View>
            </ScrollView>
        );
    }
}

//样式定义
const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        // alignItems: 'center',
        // justifyContent: 'center',
    },
    pic1: {
        width:95,
        maxHeight: 150,
    },
});


